import { Form, FormInstance, Slider, Tag } from "antd";
import { FieldType, ERASETYPE } from "../../index";
import "./index.less";
import { useEffect, useRef, useState } from "react";
interface IParam {
  eraseShape: number;
  form: FormInstance<any>;
}
interface Erase {
  size?: number;
  color?: string;
  className?: string;
  position?: {
    top: string;
    left: string;
  };
}

const Circle = (props: Erase) => {
  const { size = 20, color = "gray", className, position } = props;
  return (
    <div
      className={className}
      style={{
        ...position,
        width: `${size}px`,
        height: `${size}px`,
        borderRadius: `${size}px`,
        background: color,
      }}
    />
  );
};
const Square = (props: Erase) => {
  const { size = 20, color = "gray", className, position } = props;
  return (
    <div
      className={className}
      style={{
        ...position,
        width: `${size}px`,
        height: `${size}px`,
        background: color,
      }}
    />
  );
};
const Triangle = (props: Erase) => {
  const { size = 20, color = "gray", className, position } = props;
  return (
    <div
      className={`triangle ${className}`}
      style={{
        ...position,
        borderBottomColor: color,
        borderLeftWidth: `${size / 2}px`,
        borderRightWidth: `${size / 2}px`,
        borderBottomWidth: `${size}px`,
      }}
    />
  );
};
export const SetErase = ({
  type,
  size,
  className,
}: {
  type: number;
  size: number;
  className: string;
}) => {
  const handleSize = useRef(size);
  const [position, setPosition] = useState({ top: "10px", left: "10px" });

  const drowAreaDom: any = document.getElementById("drow-area");

  const moveEvent = (event: any) => {
    const { layerX, layerY } = event;
    const dSize = handleSize.current / 2;
    setPosition({ top: `${layerY - dSize}px`, left: `${layerX - dSize}px` });
  };

  const onMouseenter = () => {
    const erase = document.getElementsByClassName(
      "set-erase"
    )[0] as HTMLElement;
    erase.style.display = "block";
  };

  const onMouseleave = () => {
    const erase = document.getElementsByClassName(
      "set-erase"
    )[0] as HTMLElement;
    erase.style.display = "none";
  };
  useEffect(() => {
    handleSize.current = size;
  }, [size]);
  useEffect(() => {
    drowAreaDom.style = "cursor: none";
    drowAreaDom?.addEventListener("mousemove", moveEvent);
    drowAreaDom?.addEventListener("mouseenter", onMouseenter);
    drowAreaDom?.addEventListener("mouseleave", onMouseleave);
    return () => {
      drowAreaDom.style = "cursor: pointer";
      drowAreaDom?.removeEventListener("mousemove", moveEvent);
      drowAreaDom?.removeEventListener("mouseenter", onMouseenter);
      drowAreaDom?.removeEventListener("mouseleave", onMouseleave);
    };
  }, []);
  const props = {
    color: "#000",
    size,
    className,
    position,
  };
  return (
    <>
      {type === ERASETYPE.circle && <Circle {...props} />}
      {type === ERASETYPE.square && <Square {...props} />}
      {type === ERASETYPE.triangle && <Triangle {...props} />}
    </>
  );
};
const EraseImg = ({ eraseShape, form }: IParam) => {
  const tagsData = [
    {
      value: ERASETYPE.circle,
      label: <Circle />,
    },
    {
      value: ERASETYPE.square,
      label: <Square />,
    },
    {
      value: ERASETYPE.triangle,
      label: <Triangle />,
    },
  ];
  return (
    <>
      <Form.Item<FieldType>
        label="橡皮擦形状"
        name="eraseShape"
        valuePropName="checked"
        rules={[{ required: true, message: "请选择橡皮擦形状" }]}
      >
        <div>
          {tagsData.map<React.ReactNode>((tag) => (
            <Tag.CheckableTag
              key={tag.value}
              checked={eraseShape == tag.value}
              onChange={() => form.setFieldValue("eraseShape", tag.value)}
            >
              {tag.label}
            </Tag.CheckableTag>
          ))}
        </div>
      </Form.Item>
      <Form.Item<FieldType>
        label="橡皮擦大小"
        name="erasSeize"
        rules={[{ required: true, message: "请滑动大小" }]}
      >
        <Slider min={5} max={100} />
      </Form.Item>
    </>
  );
};
export default EraseImg;
